<template>
	<view class="container">
		<!-- 头部胶囊 -->
		<view class="aaa">
			<view class="Topbox" :style="'height:'+(search_top-7)+'px'"></view>
			<!-- 头部定位 -->
			<view class="fixed_position" :style="'height:'+search_height+'px;'+'line-height:'+search_height+'px;'">
				<u-icon @click="ontoIndex" name="arrow-left" label="返回" :label-size="search_height"
					:size="search_height"></u-icon>
				<text>搜索</text>
			</view>
			<!-- 搜索框 -->
			<view class="Searchbox">
				<view class="Search">
					<u-search shape="round" :clearabled="true" height="80"
					 search-icon-color="#FD4133" border-color="#FD4133"
					 bg-color="whilt" @custom="funcsearch()" @search="funcsearch()"
					 v-model="Inputvalue"
					  placeholder="请输入您要搜索的内容"></u-search>
			
				</view>
			</view>
		</view>
		<!-- s搜索记录 -->
		<view class="History">
			<view>
				<u-icon name="checkmark-circle" label="历史记录" label-size="35" size="35"></u-icon>
				<u-icon  @click="funcheckmark" name="close-circle" label="清除记录" label-size="35" size="35"></u-icon>
			</view>
			
			<view>
				<view v-for="(item,index) in historyArr" :key="index">
					<u-button >{{item}}</u-button>
				</view>
			</view>
		</view>
		<!-- 热门搜搜 -->
		<view class="Hot_search">
			<u-icon name="integral-fill" label="热门搜索" label-color="#FF0000" color="#FF0000" label-size="35" size="35"></u-icon>
	
		   <view>
			<view v-for="(item,index) in Hot_Search" :key="index">
			<u-button @click="FunHot_sea(item)">{{item}}</u-button>
			</view>
	 
			 </view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {Cachet} from "../../Components/Cephalic_capsule.js"
	export default {
		data() {
			return {
				search_top: "",
				search_bottom: "",
				search_height: "",
				search_width: "",
				search_left: "",
				search_right: "",
				// 历史记录
			   historyArr:["家政"],
			   Inputvalue:"",
			   Hot_Search:["日常保洁","深度保洁","做饭阿姨","放心搬家","家具维修","日常维修"],
			}

		},
		onLoad() {
			this.search_top = Cachet.top;
			this.search_bottom = Cachet.bottom;
			this.search_height = Cachet.height;
			this.search_width = Cachet.width;
			this.search_left = Cachet.left;
			this.search_right = Cachet.right;
		},
		methods: {
	// 跳回首页
		ontoIndex(){
		uni.reLaunch({
			url:'/pages/index/index'
		});
		 },
		 // 搜索
		 funcsearch(){
			 if(this.Inputvalue!=""){
				 this.historyArr.unshift(this.Inputvalue);
				 this.Inputvalue="";
				 // uni.navigateTo({
				 // 	url: '/pages/index/result_Search',
				 // });
			 }else{
			this.$refs.uToast.show({
								title: '输入框不能为空！',
								type: 'warning',
								url: '/pages/user/index'
							})
				 
			 };
		 },
		 // 热门搜索
		 FunHot_sea(item){
			 this.Inputvalue=item;
			 this.historyArr.unshift(item);
			 uni.navigateTo({
			 	url: '/pages/index/result_Search',
			 });
		 },
		 // 清除记录
		 funcheckmark(){
			 
			 this.historyArr=[];
		 }
		},
		onShow() {

		},
	}
</script>

<style scoped>
	.Hot_search>view:nth-of-type(1){
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		height: 300rpx;
		margin-top: 50rpx;
	}
	.Hot_search{
		height: 500rpx;
		margin-top: 60rpx;
	}
		.History>view:nth-of-type(2)>view{
			margin-left: 20rpx;
		}
	.History>view:nth-of-type(2){
		height: 300rpx;
		margin-top: 60rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.History>view:nth-of-type(1){
		display: flex;
		justify-content: space-between;
	}
	.History{
		height: 400rpx;
		margin-top: 300rpx;
	}
	.aaa {
		position: fixed;
		z-index: 99;
		background-color: #ffffff;
		width: 100%;
		height: 250rpx;
		top: 0;
	}

	.Topbox {
		background-color: white;
	}

	.fixed_position {
		margin-top: 7px;
		margin-left: 30rpx;
	}

	.fixed_position>text {
		margin-left: 30%;
		font-weight: bolder;
	}

	.Searchbox {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
	}

	.Search {
		width: 670rpx;
	}
</style>
